<template>
  <div class="container">
    <category-list @category-change="onCategoryChange" />
    <router-view class="product-list"></router-view>
  </div>

</template>

<script>
  import CategoryList from '@/components/CategoryList.vue'
  import ProductList from '@/components/ProductList.vue'

  export default {
    name: 'Category',
    components: {
      CategoryList,
      ProductList,
    },
    data() {
      return {
        selectedCategoryId: 1,
      }
    },
    methods: {
      onCategoryChange(categoryId) {
        this.selectedCategoryId = categoryId;
        console.log('Category change:', categoryId);
        this.$router.push({
          name: 'ProductList',
          params: {
            categoryId,
          },
        })
      },
    },
    created(){
      this.onCategoryChange(selectedCategoryId);
    }
  }
</script>

<style>
  .container {
    display: flex;
    height: 100vh;
    padding: 0;
    margin: 0;
  }
  .product-list {
    width: 70%;
    padding: 10px;
    overflow-y: auto;
  }
</style>
